<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>UI-Demo</title>
    <script>
        var w = document.documentElement.clientWidth / 10;
        document.getElementsByTagName('html')[0].style['font-size'] = w + 'px';
    </script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.85);
            overflow:hidden;
            padding:0;
            margin:0;
        }
        #main {
            position: absolute;
            padding: 0.3rem 0.2rem 0.2rem 0.2rem;
            height: 3.5rem;
        }
        .scroll-item {
            display: inline-block;
            margin: 0.1rem;
            width: 1.4rem;
            height: 1.65rem;
            opacity: 0.8;
            background: rgba(34,40,105, 0.7);
        }
        .scroll-item.fe-focus {
            opacity: 1;
            transition: transform 0.3s ease;
            transform: scale3d(1.03,1.03,1);
        }

        .scroll-item p {
/*            position: relative;*/
            color: white;
            font-size: 0.2rem;
            text-align: center;
            margin-left: 0.2rem;
        }

        img {
            margin-left: 0.2rem;
            margin-top: 0.1rem;
            margin-bottom: 0;
            width: 1rem;
            height: 1rem;
            display: block;
        }

        .title {
            text-align: center;
            font-size: 0.4rem;
            color: white;

        }
    </style>
</head>
<body>
<!-- 如果不需要lazyload，可以通过参数配置data-cfg="disable_lazyload:yes"-->
<p class="title">YunOS for TV UI-Demo</p>
<div id="main" fe-role="Scroll" >
    <div id="main-list" class="scroll-list">
    </div>
</div>
<script src="http://g.alicdn.com/yuntv/blitzjs/0.0.7/grunt/out/blitz_common.min.js"></script>
<script type="text/javascript" src="../FocusEngine.js" charset="utf-8"></script>
<script src="../TVUtil.js"></script>
<script>
    var indexList = [
        {name: "电视淘宝", link: "./Demo12-TVTaobao/index.html", icon: "./res/icon_1.png"},
        {name: "分页请求", link: "./Demo11-PagingRequest.html", icon: "./res/icon_2.png"},
        {name: "双向列表", link: "./Demo9-GridView/index.html", icon: "./res/icon_9.png"},
        {name: "重绘", link: "./Demo10-Rerender.html", icon: "./res/icon_10.png"},
//        {name: "入门", link: "./Demo1-Simple.html", icon: "./res/icon_1.png"},
//        {name: "Focus", link: "./Demo2-CustomFocus.html", icon: "./res/icon_2.png"},
        {name: "入门", link: "./Demo3-ATVFocus.html", icon: "./res/icon_3.png"},
        {name: "事件", link: "./Demo4-Event.html", icon: "./res/icon_4.png"},
        {name: "Loading", link: "./Demo5-Loading.html", icon: "./res/icon_5.png"},
        {name: "纵向列表", link: "./Demo6-VerticalList.html", icon: "./res/icon_6.png"},
        {name: "多行纵向列表", link: "./Demo7-VerticalList2.html", icon: "./res/icon_7.png"},
        {name: "横向列表", link: "./Demo8-HorizontalList.html", icon: "./res/icon_8.png"},
        {name: "Progress", link: "./Demo14-progress.html", icon: "./res/icon_5.png"},
        {name: "Dialog", link: "./Demo15-dialog.html", icon: "./res/icon_6.png"},
        {name: "HighLight", link: "./Demo16-grid_highlight.html", icon: "./res/icon_7.png"},
    ];
    var mainList = document.getElementById('main-list');
    // 动态增加元素
    function addItems(list) {
        var _html = "";
        for(var i = 0; i < list.length; i++) {
            var item = list[i];
            _html += "<div fe-role=\"Widget\" class=\"scroll-item\" data-href=" + item.link + "> " +
            "<img  src=" + item.icon + "> " +
            "<p  class=appName> " + item.name + "</p>" +
            "</div>";
        }
        mainList.innerHTML += _html;
    }

    addItems(indexList);

    var root = FocusEngine.render();
    var _focus = new TVUtil.Highlight({
                root: root,
                styles: {
                    border: 'solid 0.05rem #ffffff'
                }
            }
    );

    root.on("okdown", function(e) {
        console.log("html");
        var _url = e.target.con.getAttribute("data-href");
        var _webcore = blitz.checkWebcore();
        if (_webcore === "webkit") {
            location.href = _url;
        } else {
            var base = blitz.load("base");
            base.startPage(_url);
        }
    });

</script>
</body>
</html>
